<template>
<uni-shadow-root class="partials-gridlist-gridlist"><block v-if="receiveData.androidTemplate == ''">
    
    <view class="showTypeContainer" :style="'padding: '+((!receiveData.jsonData.layoutType||receiveData.jsonData.layoutType==1)?'20rpx 0rpx':'20rpx 30rpx')+';'" v-if="receiveData.jsonData.showType == 0">
        <block v-if="receiveData.jsonData.iconType == 0">
          <view v-for="(cells,index) in (receiveData.jsonData.cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ receiveData.jsonData.column)+'%;'">
            <view :class="' '+(cells.linkUrl)">{{cells.text}}</view>
          </view>
        </block>
        <block v-else>
            <block v-if="(!receiveData.jsonData.layoutType||receiveData.jsonData.layoutType==1)">
                <view v-for="(cells,index) in (receiveData.jsonData.cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ receiveData.jsonData.column)+'%;'">
                  <view class="grid_cell_item" v-if="cells.linkUrl!='contact'" :data-link="cells.linkUrl" @click.stop.prevent="tolinkUrl">
                    <image mode="aspectFit" :style="'width: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*110:110)+'rpx;height: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*110:110)+'rpx'" v-if="cells.iconPath" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
                    <view :class="' '+(cells.loginCheck)" :site_url="cells.linkUrl" :targetType="cells.targetType">
                      {{cells.text}}
                    </view>
                  </view>
                  <button open-type="contact" plain="true" hover-class="none" style="border:none" class="grid_cell_item kefu" v-else>
                    <image mode="aspectFit" :style="'width: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*110:110)+'rpx;height: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*110:110)+'rpx'" v-if="cells.iconPath" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
                    <view :class="' '+(cells.loginCheck)" :site_url="cells.linkUrl" :targetType="cells.targetType">
                      {{cells.text}}
                    </view>
                  </button>
                </view>
            </block>
            
            <block v-else>
                <view class="grid_cell_block">
                    <view v-for="(cells,index) in (receiveData.jsonData.cells)" :key="cells.index" class="grid_cell_two" style="width:50%">
                      <view class="grid_cell_item_two" :style="'flex-direction:'+(receiveData.jsonData.layoutType==2?'row':'row-reverse')" v-if="cells.linkUrl!='contact'" :data-link="cells.linkUrl" @click.stop.prevent="tolinkUrl">
                        <view class="grid_cell_item_text_two" :site_url="cells.linkUrl" :style="'align-items:'+(receiveData.jsonData.layoutType==2?'flex-start':'flex-end')" :targetType="cells.targetType">
                          <text class="text_short" :style="'font-weight: bold;text-align: '+(receiveData.jsonData.layoutType==2?'left':'right')+';'">{{cells.text}}</text>
                          <text style="font-size: 26rpx;color: #666;margin-top: 14rpx;">{{cells.subText}}</text>
                        </view>
                        <image mode="aspectFit" :style="'width: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*150:150)+'rpx;height: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*150:150)+'rpx'" v-if="cells.iconPath" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
                      </view>
                      <button open-type="contact" plain="true" hover-class="none" style="border:none" class="grid_cell_item kefu" v-else>
                        <view class="grid_cell_item_text_two" :site_url="cells.linkUrl" :targetType="cells.targetType">
                          {{cells.text}}
                        </view>
                        <image mode="aspectFit" :style="'width: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*150:150)+'rpx;height: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*150:150)+'rpx'" v-if="cells.iconPath" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
                      </button>
                    </view>
                </view>
            </block>
        </block>
      </view>
    
      <view style="border:1px solid rgb(214,214,214);border-bottom:none;" class="showTypeContainer" v-if="receiveData.jsonData.showType == 1">
        <block v-if="receiveData.jsonData.iconType == 0">
        <view>222</view>
              <view v-for="(cells,index) in (cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ column)+'%;'">
            <view :class="' '+(cells.linkUrl)">{{cells.text}}</view>
          </view>
        </block>
        <block v-else>
           <view>1111</view>
          <view v-for="(cells,index) in (cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ column)+'%;'">
            <image :src="cells.iconPath"></image>
            <view :class="' '+(cells.loginCheck)" :site_url="cells.linkUrl" :targetType="cells.targetType">
              {{cells.text}}
            </view>
          </view>
        </block>
      </view>
      <view class="showTypeContainer3" v-if="showType == 3">
          <block v-for="(cells,index) in (cells)" :key="cells.index">
            <block v-if="index == 0">
              <view class="grid_cell3_1" :data-link="cells.linkUrl" @click="tolinkUrl">
                <image mode="scaleToFill" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
              </view>
            </block>
            <block v-else>
              <view class="grid_cell3_2" :data-link="cells.linkUrl" @click="tolinkUrl">
                <image mode="scaleToFill" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
              </view>
            </block>
          </block>
      </view>
</block>
     
<block v-if="receiveData.androidTemplate == 'second_navigation_with_shadow'">
    
    <view class="showTypeContainer" v-if="receiveData.jsonData.showType == 0">
       <view class="boxShadow">
        <block v-if="receiveData.jsonData.iconType == 0">
          <view v-for="(cells,index) in (receiveData.jsonData.cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ receiveData.jsonData.column)+'%;'">
            <view :class="' '+(cells.linkUrl)">{{cells.text}}</view>
          </view>
        </block>
        <block v-else>
          <view v-for="(cells,index) in (receiveData.jsonData.cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ receiveData.jsonData.column)+'%;'">
            <view class="grid_cell_item" v-if="cells.linkUrl!='contact'" :data-link="cells.linkUrl" @click.stop.prevent="tolinkUrl">
              <image v-if="cells.iconPath" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
              <view :class="' '+(cells.loginCheck)" :site_url="cells.linkUrl" :targetType="cells.targetType">
                {{cells.text}}
              </view>
            </view>
            <button open-type="contact" plain="true" hover-class="none" style="border:none" class="grid_cell_item kefu" v-else>
              <image v-if="cells.iconPath" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
              <view :class="' '+(cells.loginCheck)" :site_url="cells.linkUrl" :targetType="cells.targetType">
                {{cells.text}}
              </view>
            </button>
          </view>
        </block>
    </view>
      </view>
    
      <view style="border:1px solid rgb(214,214,214);border-bottom:none;" class="showTypeContainer" v-if="receiveData.jsonData.showType == 1">
        <block v-if="receiveData.jsonData.iconType == 0">
        <view>222</view>
              <view v-for="(cells,index) in (cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ column)+'%;'">
            <view :class="' '+(cells.linkUrl)">{{cells.text}}</view>
          </view>
        </block>
        <block v-else>
           <view>1111</view>
          <view v-for="(cells,index) in (cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ column)+'%;'">
            <image :src="cells.iconPath"></image>
            <view :class="' '+(cells.loginCheck)" :site_url="cells.linkUrl" :targetType="cells.targetType">
              {{cells.text}}
            </view>
          </view>
        </block>
      </view>
      <view class="showTypeContainer3" v-if="showType == 3">
          <block v-for="(cells,index) in (cells)" :key="cells.index">
            <block v-if="index == 0">
              <view class="grid_cell3_1" :data-link="cells.linkUrl" @click="tolinkUrl">
                <image mode="scaleToFill" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
              </view>
            </block>
            <block v-else>
              <view class="grid_cell3_2" :data-link="cells.linkUrl" @click="tolinkUrl">
                <image mode="scaleToFill" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
              </view>
            </block>
          </block>
      </view>
</block>

<block v-if="receiveData.androidTemplate == 'vertical_column_navigation'">
    
    <view class="user_menu">
      <view v-for="(cells,index) in (receiveData.jsonData.cells)" :key="cells.index" class="user_menu_item">
        <view class="user_menu_item_link" v-if="cells.linkUrl!='contact'" :data-link="cells.linkUrl" @click="tolinkUrl">
          <view class="user_menu_item_left">
            <image class="user_menu_item_icon" :src="cells.iconPath"></image>
            <text class="user_menu_item_name">{{cells.text}}</text>
          </view>
          <image class="user_menu_item_more" src="https://image1.sansancloud.com/xianhua/2019_3/27/15/44/8_298.jpg?x-oss-process=style/preview_120"></image>
        </view>
        <button open-type="contact" plain="true" hover-class="none" style="border:none" class="user_menu_item_link kefu" v-else>
          <view class="user_menu_item_left">
            <image class="user_menu_item_icon" :src="cells.iconPath"></image>
            <text class="user_menu_item_name">{{cells.text}}</text>
          </view>
          <image class="user_menu_item_more" src="https://image1.sansancloud.com/xianhua/2019_3/27/15/44/8_298.jpg?x-oss-process=style/preview_120"></image>
        </button>
      </view>
    </view>
</block>
<block v-if="receiveData.androidTemplate == 'slide_navigation'">
    <view class="showTypeContainer" :style="'padding: '+((!receiveData.jsonData.layoutType||receiveData.jsonData.layoutType==1)?'20rpx 0rpx':'20rpx 30rpx')+';'" v-if="receiveData.jsonData.showType == 0">
        <block v-if="receiveData.jsonData.iconType == 0">
          <view v-for="(cells,index) in (receiveData.jsonData.cells)" :key="cells.index" class="grid_cell" :style="'width:'+(100/ receiveData.jsonData.column)+'%;'">
            <view :class="' '+(cells.linkUrl)">{{cells.text}}</view>
          </view>
        </block>
        <block v-else>
            <block v-if="(!receiveData.jsonData.layoutType||receiveData.jsonData.layoutType==1)">
                <scroll-view scroll-x="true" class="slide_block" @scroll="scrollNumFun" lower-threshold="10" upper-threshold="10" @scrolltoupper="toupperFun" @scrolltolower="tolowerFun">
                    <view v-for="(item,rowNum) in (rowNumList)" style="word-break: break-all;">
                        <view v-for="(cells,columnNum) in (receiveData.jsonData.cells)" class="grid_cell" :style="'width:'+(100/ 5)+'%;'" v-if="columnNum>=rowNum*publicFun.toNum(receiveData.jsonData.column)&&columnNum<publicFun.toNum(receiveData.jsonData.column)+rowNum*publicFun.toNum(receiveData.jsonData.column)">
                          <view class="grid_cell_item" v-if="cells.linkUrl!='contact'" :data-link="cells.linkUrl" @click.stop.prevent="tolinkUrl">
                            <image mode="aspectFit" :style="'width: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*110:110)+'rpx;height: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*110:110)+'rpx'" v-if="cells.iconPath" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
                            <view :class="' '+(cells.loginCheck)" :site_url="cells.linkUrl" :targetType="cells.targetType">
                              {{cells.text}}
                            </view>
                          </view>
                          <button open-type="contact" plain="true" hover-class="none" style="border:none" class="grid_cell_item kefu" v-else>
                            <image mode="aspectFit" :style="'width: '+(receiveData.jsonData.bili?jsonData.bili*110:110)+'rpx;height: '+(receiveData.jsonData.bili?receiveData.jsonData.bili*110:110)+'rpx'" v-if="cells.iconPath" :src="(cells.iconPath)+'?x-oss-process=style/preview'"></image>
                            <view :class="' '+(cells.loginCheck)" :site_url="cells.linkUrl" :targetType="cells.targetType">
                              {{cells.text}}
                            </view>
                          </button>
                        </view>
                    </view>
                </scroll-view>
                <view class="scroll_block" v-if="receiveData.jsonData.column>5">
                    <view class="scroll_line" :style="'left: '+(scrollNum)+'%;z-index: 2;'"></view>
                    <view class="scroll_line" style="left: 100%;background: #eee;z-index: 1;"></view>
                </view>
            </block>
        </block>
      </view>
</block></uni-shadow-root>
</template>
<wxs src="../../public/publicFun.wxs" module="publicFun"></wxs>
<script>

global['__wxRoute'] = 'partials/gridlist/gridlist'
const app = getApp();
Component({
  properties: {
    receiveData: {
      type: JSON,
      value: 'default value',
    }
  },
  data: {
    someData: {},
    listData: {
      cells: [
        {
          iconPath: "https://image1.sansancloud.com/xianhua/2019_3/27/15/37/19_117.jpg?x-oss-process=style/preview_120",
          linkUrl: "address.html",
          text: "收货地址",
          color: "#777777"
        },
        {
          iconPath: "https://image1.sansancloud.com/xianhua/2019_3/27/15/37/19_432.jpg?x-oss-process=style/preview_120",
          linkUrl: "my_favorite.html",
          text: "我的收藏",
          color: "#777777"
        },
        {
          iconPath: "https://image1.sansancloud.com/xianhua/2019_3/27/15/37/19_434.jpg?x-oss-process=style/preview_120",
          linkUrl: "my_coupons.html",
          text: "优惠券",
          color: "#777777"
        },
        {
          iconPath: "https://image1.sansancloud.com/xianhua/2019_3/27/15/37/19_429.jpg?x-oss-process=style/preview_120",
          linkUrl: "",
          id: "1",
          text: "在线客服",
          color: "#777777"
        },
        {
          iconPath: "https://image1.sansancloud.com/xianhua/2019_3/27/15/37/19_420.jpg?x-oss-process=style/preview_120",
          linkUrl: "custom_page_my_newlist?pageNage=常见问题",
          text: "常见问题",
          color: "#777777"
        }
      ],
      column: 3,
      showType: 0,
      scrollNum:0,
      rowNumList:1,
    },
  },
  ready: function () {
    let that = this;
    if(that.data.receiveData.androidTemplate == "slide_navigation"){
        let rowNumList=1;
        let cellLength=that.data.receiveData.jsonData.cells.length;
        let column=that.data.receiveData.jsonData.column;
        if(cellLength>5){
           rowNumList = Math.ceil(cellLength/Number(column))
        }
        that.setData({rowNumList:rowNumList})
    }
    app.globalData.consoleFun("=====gridist组件-导航=====",[that.data.receiveData])
  },
  methods: {
    scrollNumFun:function(e){
        console.log("===scrollNumFun===",e)
        let that=this;
        let width = e.detail.scrollWidth//滚动区域宽度
        let left = e.detail.scrollLeft<0?0:e.detail.scrollLeft//滚动距离
        // let scrollNum = that.data.scrollNum//已滚动的距离
        let windowWidth= wx.getSystemInfoSync().windowWidth
        let scrollLeftNum=width-windowWidth;
        let lineNum=0;
        let scrollNum=(left==0?0:(left/scrollLeftNum*100))>100?100-lineNum*2:((left/scrollLeftNum*100)-lineNum*2<0?0:((left/scrollLeftNum*100)-lineNum*2));
        console.log(windowWidth,scrollLeftNum,scrollNum,left,lineNum)
        that.setData({
          scrollNum: scrollNum
        })
        
    },
    tolinkUrl: function (event) {
    app.globalData.consoleFun("=====gridist组件-tolinkUrl=====",[event.currentTarget.dataset.link])
      app.globalData.linkEvent(event.currentTarget.dataset.link);
    }
  },
})
export default global['__wxComponents']['partials/gridlist/gridlist']
</script>
<style platform="mp-weixin">
@import 'second_navigation_with_shadow/second_navigation_with_shadow.css';/* 引入带有阴影的 */
@import 'vertical_column_navigation/index.css';/* 引入带有阴影的 */
.showTypeContainer{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  /* padding-top: 6px;
  padding-bottom: 17px; */
  padding: 20rpx 0rpx;
  box-sizing: border-box;
  background: #fff;
} 
.grid_cell{
  /* padding-top: 11px; */
  padding: 0rpx 20rpx 20rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.grid_cell_item{
  /* padding-top: 11px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.grid_cell image{
  width: 110rpx;
  height:110rpx;
}
.noCheck{
    margin-top: 20rpx;
    font-size: 12px;
    color: #666666;
}
/* .grid_cell view{
  color: #666666;
  font-size: 12px;
} */
.grid_cell button{
  margin-top: 4px;
  color: #666666;
  font-size: 12px;
  line-height: 17px;
}
/* 左右图标 */
.showTypeContainer_1{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.grid_cell_1{
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: xx-small;
}
/**第三种*/
.showTypeContainer3{
  width: 100%;
  height: 8em;
}
.showTypeContainer3 image{
  height: 95%;
  width: 95%;
}
.grid_cell3_1{
  float: left;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid_cell3_2{
  float: right;
  width: 50%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 左字右图 */
.grid_cell_block{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 1rpx solid #EAEAEA;
    border-left: 1rpx solid #EAEAEA;
    border-top: 1rpx solid #EAEAEA;
}
.grid_cell_two{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.grid_cell_two:nth-child(odd){
  border-right: 1rpx solid #EAEAEA;
  border-bottom: 1rpx solid #EAEAEA;
}
.grid_cell_two:nth-child(even){
  border-bottom: 1rpx solid #EAEAEA;
}
.grid_cell_item_two{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
}
.grid_cell_item_text_two{
    font-size: 32rpx;
    display: flex;
    color: #333;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
}
.text_short{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
@import 'slide_navigation/index.css';/* 引入带有阴影的 */
</style>